<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>骡窝窝酒店</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
<meta content="yes" name="apple-mobile-web-app-capable" />
<link href="styles/bootstrap.min.css" rel="stylesheet" />
<link href="styles/NewGlobal.css" rel="stylesheet" />

<script type="text/javascript" src="Scripts/zepto.js"></script>
    <script type="text/javascript" src="/js/common.js"></script>

</head>
<body>
 <div class="header">
 <a href="index.html" class="home">
            <span class="header-icon header-icon-home"></span>
            <span class="header-name">主页</span>
</a>
<div class="title" id="titleString"></div>
<a href="javascript:history.go(-1);" class="back">
            <span class="header-icon header-icon-return"></span>
            <span class="header-name">返回</span>
        </a>
 </div>

        
    <script type="text/javascript" src="calendar/touch.js"></script><!--新版zepto合并版中不包括touch.js-->
    <script type="text/javascript" src="calendar/highlight.js"></script>
    <script type="text/javascript" src="calendar/gmu.js"></script>
    <script type="text/javascript" src="calendar/event.js"></script>
    <script type="text/javascript" src="calendar/parseTpl.js"></script>
    <script type="text/javascript" src="calendar/widget.js"></script>
    <script type="text/javascript" src="calendar/calendar.js"></script>
    <script type="text/javascript" src="dialog/dialog.js"></script>
    <link rel="stylesheet" type="text/css" href="calendar/calendar.css" />
    <link rel="stylesheet" type="text/css" href="calendar/calendar.default.css" />
    <link rel="stylesheet" type="text/css" href="dialog/dialog.css" />
    <link rel="stylesheet" type="text/css" href="dialog/dialog.default.css" />
    <script type="text/javascript" src="/js/plugins/jrender/jrender.js"></script>
    <style>
        .section {
            background: #f3f3f3;
            font-size: 14px;
        }
        #datepicker_wrap {
            overflow: hidden;
            height: 0;
            -webkit-transition: height 200ms ease-in-out;
            background: #e1e1e1;
            -webkit-box-sizing:border-box;
            box-sizing:border-box;
        }
        #datepicker_wrap>div {
            display: none;
            padding: 5px 5px 25px 5px;
        }

        .filter {
            padding:10px 10px 0px;
        
        }
        .filter:after {
            content: '\0020';
            clear: both;
            display: block;
            height: 0;
            font-size: 0;
            line-height: 0;
        }

        .filter a {
            border: 1px solid #e1e1e1;
            text-decoration: none;
            color: #000;
            padding: 5px 26px 5px 5px;
            margin: 0 5px 0 0;
            position: relative;
            background: #fff;
        }
        .icon-down {
            background-image: url("http://gmu.baidu.com/demo/assets/icons-36-black.png");
            background-position: 	-216px 50%;
             width:18px;
            height: 18px;
            display: inline-block;
            -webkit-background-size: 776px 18px;
            background-size: 776px 18px;
            float: right;
              margin-top: 10px;
        }
        .icon-down-up {
            background-position: 	-180px 50%;
        }
        .filter a .ui-icon-down {
            position: absolute;
            top: 50%;
            right: 5px;
            background-image: url("http://gmu.baidu.com/demo/assets/icons-36-black.png");
            -webkit-background-size: 776px 18px;
            background-size: 776px 18px;
            width:18px;
            height: 18px;
            margin-top: -9px;
            background-position: 	-216px 50%;
        }
        .filter a.ui-state-active, .filter a.ui-state-hover {
            background: #fff;
        }
        .filter a.ui-state-active .ui-icon-down, .filter a.ui-state-hover .ui-icon-down {
            background-position: 	-180px 50%;
        }

        .filter a.search {
            float: right;
            padding: 5px;
            margin: 0;
        }
        .result {
            padding:10px 15px;
            text-align: left;
        }
    </style>
 <div class="container">
<ul class="unstyled hotel-bar nav nav-pills nav-justified">
			<li class="first">
           <a href="#BookRoom"  class="active">房型</a>
			</li>
			<li class="nav-item">
                <a class="nav-link" href="#pills-3">简介</a>
            </li>

			<li><a href="#">地图</a></li>
			<li><a id="review" href="/hotel/review.html">评论</a></li>
</ul>

     <!--酒店预订-->
     <div class="tab-content" id="pills-tabContent">
         <div id="BookRoom" class="tab-pane active fade in">

             <div alt="" class="detail-address-bar">
                 <img src="Images/location_icon.png">
                 <p render-html="name"></p>
                 <p render-html="address"></p>
             </div>
             <div id="datetab" class="detail-time-bar">
                 <img alt="" src="Images/calendar.png">
                 <p render-html="tel"></p>
                 <span class="icon-down"></span>
             </div>


             <ul class="unstyled roomlist">



                 <li render-loop="list">
                     <div class="roomtitle" >
                         <div class="roomname" render-html="list.name"></div>

                         <div class="fr">

                             <span style="color: red">价格:</span>

                             <em class="orange roomprice" render-html="list.price">
                             </em>

                             <img title="房间" render-src="list.coverUrl"></a>
                             <a href='/hotel/hotelOrder.html' title='立即预定' class='btn btn-success iframe'>预定</a>


                         </div>

                     </div>






                 </li>


             </ul>
             <div style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);" class="hotel-prompt">
                 <span class="hotel-prompt-title" id="digxx">特别提示</span>
                 <p>最早入住时间为中午12：00，如需提前入住请联系客服。</p>
             </div>
         </div>



         <!--酒店简介-->
         <div class="tab-pane fade active in" id="pills-3">
             <div id="hotelinfo" class="hotel-prompt ">
                 <span class="hotel-prompt-title">酒店简介</span>
                 <p render-html="intro"></p>
                 <p render-html="address"></p>
                 <p render-html="tel"></p>
             </div>
         </div>
         </div>



     </div>


	</div>


  <div class="footer">
  <div class="gezifooter">
      
      <a href="login.aspx" class="ui-link">立即登陆</a> <font color="#878787">|</font> 
       <a href="reg.aspx" class="ui-link">免费注册</a> <font color="#878787">|</font>                 
                  

       <a href="/index.html" class="ui-link">骡窝窝</a>
  </div>
  <div class="gezifooter">
    <p style="color:#bbb;">骡窝窝酒店连锁 &copy; 版权所有 2015-2020</p>
  </div>
  </div>

</body>
<script>
$(function () {
    var id = getParams().hotelId;
    $("#review").attr("href","/hotel/review.html?hotelId=" + id);
    $.get("/hotels/"+id,function (data) {

        $("#BookRoom").renderValues(data);
        $("#hotelinfo").renderValues(data);

    })



    $.get("/hotelDetails/"+id,function (data) {

        $(".roomlist").renderValues({list:data});

    })
})
</script>
</html>
